<script setup>
import { getSalesBoardXsdd, getSalesBoardXsck } from "@/api/visual/salesBoard";
import { useLocalStorage } from "@vueuse/core";

const list = ref([]);
const key = ref(1);
const type = useLocalStorage("salesBoard1.type", "price");
const loadData = async () => {
  list.value = [];
  const xsddData = await getSalesBoardXsdd({ type: type.value });
  const xsckData = await getSalesBoardXsck({ type: type.value });

  xsddData.data.forEach((item) => {
    Object.keys(item).forEach((key) => {
      list.value.push({ title: key, value: item[key] });
    });
  });

  xsckData.data.forEach((item) => {
    Object.keys(item).forEach((key) => {
      list.value.push({ title: key, value: item[key] });
    });
  });
};

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++;
    }, 100);
  });
};

onMounted(loadData);
onMounted(() => {
  window.addEventListener("resize", keyResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", keyResize);
});
</script>

<template>
  <div class="ps_w_h_100 salesBoard1">
    <dv-border-box7 :key="key">
      <div class="select">
        <select class="chart-select" v-model="type" @change="loadData">
          <option value="price">按金额</option>
          <option value="sumqty">按数量</option>
        </select>
      </div>

      <div class="ps_h_100 statistic-list">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="statistic-list-item"
        >
          <el-statistic :title="item.title" :value="item.value" />
        </div>
      </div>
    </dv-border-box7>
  </div>
</template>

<style scoped lang="scss">
:deep(.border-box-content) {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;

  .select {
    display: flex;
    justify-content: flex-end;
    padding-top: 5px;
  }
}
.statistic-list {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  &-item {
    width: 30%;
    flex-shrink: 0;
  }
}

:deep(.el-statistic) {
  text-align: center;
  .el-statistic__content,
  .el-statistic__head {
    color: #fff;
  }
}
</style>
